<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/zhezhao.css">
</head>
<body>
<!--快捷方式-->
<!--div.zhezao>div.alert>(.header+.main+.btnList(.yes+.no))-->
<!--<div class="zhezao">
    <div class="alert">
        <div class="header"><span class="title">温馨提示</span> <span class="close">X</span></div>
        <div class="main">
            <h1>一旦卖出！概不负责！</h1>
        </div>
        <div class="btnList">
            <div class="btn">确定</div>
            <div class="btn">取消</div>
        </div>
    </div>
</div>-->
<!--<div class="blueDiv" style="width:200px;height:200px;background-color: blue"></div>-->
<button class="button">点击生成遮罩层</button>
<script>
    var button = document.querySelector("button");
    button.onclick = function () {
        var zhezhao = document.createElement("div");
        zhezhao.className = "zhezao";
        zhezhao.innerHTML = `
                <div class="alert">
                    <div class="header"><span class="title">温馨提示</span> <span class="close">X</span></div>
                    <div class="main">
                        <h1>一旦卖出！概不负责！</h1>
                    </div>
                    <div class="btnList">
                        <div class="btn">确定</div>
                        <div class="btn">取消</div>
                    </div>
                </div>
        `;
        var body = document.querySelector("body");
        body.appendChild(zhezhao);
        //button.parentNode.appendChild(zhezhao);
        //点击close关闭页面
        var close = document.querySelector(".close");
        close.onclick = function () {
            //button.parentNode.removeChild(zhezhao);
            body.removeChild(zhezhao);
        };
        //额外题目：点击确定添加一个蓝色的div，点击取消不添加
        var btn = document.querySelectorAll(".btn");
        var blueDiv = document.createElement("div");
        blueDiv.className = "blueDiv";
        blueDiv.style.width = "200px";
        blueDiv.style.height = "200px";
        blueDiv.style.backgroundColor = "skyblue";
        /*blueDiv.innerHTML = `
           <div style="width:200px;height:200px;background-color: blue"></div>
        `;*/
        btn[0].onclick = function () {
            //btn[0].parentElement.parentElement.appendChild(blueDiv);
            body.appendChild(blueDiv);
            body.removeChild(zhezhao);
        };
        btn[1].onclick = function () {
            //btn[0].parentElement.parentElement.removeChild(blueDiv);
            //console.log([blueDiv]);
            //blueDiv.parentNode.removeChild(blueDiv);
            body.removeChild(zhezhao);
        }


    }


</script>
</body>
</html>